<template>
	<view style="margin-left: 15px;margin-right: 15px;">
		<u-form :model="vacationDO" ref="uForm">
			<u-form-item label="请假类型" labelWidth="70px">
				<u-input v-model="vacationType" type="select" :border="true" @click="vacationTypeShow = true" />
				<u-select v-model="vacationTypeShow" mode="single-column" :list="vacationTypeList"
					@confirm="vacationTypeConfirm">
				</u-select>
			</u-form-item>
			<u-form-item label="请假时间" labelWidth="70px">
				<u-input v-model="vacationTime" :disabled="true" :border="true" @click="timeShow = true" />
				<u-calendar v-model="timeShow" mode="range" @change="timeChange" :min-date="getDate()"  max-date="2099-01-01"></u-calendar>
			</u-form-item>
			<u-form-item label="请假理由" labelWidth="70px">
				<u-input v-model="vacationDO.vacationDescribe" type="textarea" :border="true" />
			</u-form-item>
			<u-form-item label="联系方式" labelWidth="70px">
				<u-input v-model="vacationDO.studentPhone" :border="true" />
			</u-form-item>
			<u-form-item label="家长名字" labelWidth="70px">
				<u-input v-model="vacationDO.studentParent" :border="true" />
			</u-form-item>
			<u-form-item label="家长联系方式" labelWidth="100px">
				<u-input v-model="vacationDO.studentParentPhone" :border="true" />
			</u-form-item>
			<u-button :custom-style="customStyle" type="primary" @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					marginTop: "100px",
				},
				vacationDO: {
					startTime: "",
					endTime: "",
					vacationType: "",
					vacationDescribe: "",
					studentId: "9",
					studentName: "郝璐",
					studentNumber: "512011948193",
					studentPhone: "",
					studentParent: "",
					studentParentPhone: ""
				},
				vacationTypeShow: false,
				timeShow:false,
				vacationTime: "",
				vacationType: "",
				vacationTypeList: [{
						value: '0',
						label: '病假'
					}, {
						value: '1',
						label: '事假'
					}, {
						value: '2',
						label: '放假'
					}, {
						value: '3',
						label: '其他'
					},

				],
			};
		},
		methods: {
			getDate() {
				let dateNow = new Date();
				return dateNow.getFullYear() + "-" + (dateNow.getMonth() + 1) + "-" + dateNow.getDate()
			},
			vacationTypeConfirm(data) {
				this.vacationDO.vacationType = data[0].value;
				this.vacationType = data[0].label;
			},
			timeChange(e){
				this.vacationTime = e.startDate + " - " +e.endDate;
				this.vacationDO.startTime = e.startDate;
				this.vacationDO.endTime = e.endDate;
			},
			submit() {
				this.$axios.post("/api/attendance/vacation/applyVacation", this.vacationDO).then(r => {
					if (r.data.code == 200) {
						uni.showToast({
							title: '请假成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				})
			},
		}
	};
</script>
